<!--
 * @Author: LiuYan
 * @Date: 2022-12-30 13:54:53
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-12-30 14:47:17
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./common/css/coommon.css" />
</head>

<body>
    <div class="revenueAndExpenditureAccount" id="app">
        <div class="header">
            <div class="title">收支流水</div>
            <div class="content">
                <div class="item">
                    <div class="row">
                        <div class="input-group">
                            <label>项目名称</label>
                            <input style="width: 280px" placeholder="输入关键字" />
                        </div>
                        <div class="input-group">
                            <label>项目人员</label>
                            <input style="width: 280px" placeholder="输入人员姓名" />
                        </div>
                        <div class="input-group">
                            <label>日期</label>
                            <input style="width: 280px" placeholder="输入关键字" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="select-group">
                            <label>收支类型</label>
                            <div class="options">
                                <input style="width: 280px" placeholder="输入关键字" />
                                <ul>
                                    <li>输入关键字</li>
                                    <li>输入关键字</li>
                                    <li>输入关键字</li>
                                    <li>输入关键字</li>
                                </ul>
                            </div>
                        </div>
                        <div class="input-group">
                            <label>合同编号</label>
                            <input style="width: 280px" placeholder="输入合同编号" />
                        </div>
                    </div>
                </div>
                <div class="item">
                    <button class="button_primary">
                        <img src="./common/img/common/soso.png" /> 搜索
                    </button>
                    <button class="button_primary_plain">
                        <img src="./common/img/common/chongzhi.png" />重置
                    </button>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="cards">
                <div class="card">
                    <p>项目总数</p>
                    <p>12,256</p>
                </div>
                <div class="card">
                    <p>项目总数</p>
                    <p>12,256</p>
                </div>
                <div class="card">
                    <p>项目总数</p>
                    <p>12,256</p>
                </div>
            </div>
            <br>
            <div class="title">
                <div class="item">
                    共有<span>200</span>条数据&ensp;&ensp;&ensp;已选 1
                </div>
                <div class="item">
                    <button class="button_success_plain_other"><img src="./common/img/common/01.png" />
                        导出列表</button>
                    <button class="button_warning_plain"><img src="./common/img/common/02.png" />
                        导出记录</button>
                </div>
            </div>
            <br>
            <div class="table">
                <div class="table-header">
                    <div class="tr">
                        <div class="td center" style="width: 25px">
                            <input type="checkbox" />
                        </div>
                        <div class="td center" style="width: 10%">项目名称</div>
                        <div class="td center" style="width: 10%">合同名称</div>
                        <div class="td center" style="width: 10%">合同编号</div>
                        <div class="td center" style="width: 10%">负责人</div>
                        <div class="td center" style="width: 10%">收支类型</div>
                        <div class="td center" style="width: 10%">金额</div>
                        <div class="td center" style="width: 10%">收支时间</div>
                        <div class="td center" style="width: 10%">操作</div>
                    </div>
                </div>
                <div class="table-body" style="height:30vh;overflow-y: auto;">
                    <div class="tr" v-for="item in list">
                        <div class="td center" style="width: 25px">
                            <input type="checkbox" />
                        </div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">{{item.value}}</div>
                        <div class="td center" style="width: 10%">
                            <button class="button_primary_text button_link">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pageTotal">
                <div class="pagination">
                    <span>共 {{total}} 条</span>
                    <ul>
                        <li @click="shang"><i class="bi bi-chevron-left"></i></li>
                        <li v-show="start > 0" @click="()=>{
                      if(start > 0){
                        params.page = start;
                        end-=3
                        start-=3
                      }
                    }">
                            ...
                        </li>
                        <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
                            :class="[item == params.page ? 'active' :'']">
                            {{item}}
                        </li>
                        <li v-show="end <= totalPage" @click="()=>{
                      if(end <= totalPage){
                      params.page = end;
                      end+=3
                      start+=3
                      }
                    }">
                            ...
                        </li>
                        <li @click="next"><i class="bi bi-chevron-right"></i></li>
                    </ul>
                </div>
            </div>
        </div>
</body>
<script src="./common/js/vue.js"></script>
<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                total: 0,
                totalPage: 0,
                start: 0,
                end: 4,
                list: [],
                params: {
                    page: 1,
                    limit: 10,
                },
                statusList: [
                    { name: '所有', value: -1 },
                    { name: '待确认', value: 1 },
                    { name: '处理中', value: 1 },
                    { name: '已解决', value: 1 },
                    { name: '由我创建', value: 1 },
                    { name: '由我解决', value: 1 },
                    { name: '已关闭', value: 1 },
                ],
                statusActive: 0
            };
        },
        //页面初始化加载
        mounted() {
            console.log("页面初始化加载");
            this.get();
        },
        //所有函数都写在这里
        methods: {
            // 列表状态切换
            statusChange(item, index) {
                this.statusActive = index
            },
            shang() {
                if (this.params.page > 1) this.params.page--;
                if (this.params.page < this.start + 1) {
                    this.end -= 3;
                    this.start -= 3;
                }
                this.get();
            },
            next() {
                if (this.params.page < this.totalPage) this.params.page++;
                if (this.params.page > this.end - 1) {
                    this.end += 3;
                    this.start += 3;
                }
                this.get();
            },
            onCurrentPage(page) {
                this.params.page = page;
            },
            //接口
            get() {
                // ajax 请求
                // $.ajax()
                this.totalPage = 10; // 总页数
                this.total = 100; //总条数
                this.list = [
                    {
                        value: "吴恒",
                    },
                ];
            },
        },
    }).mount("#app");
</script>

</html>